<template lang="html">
      <div class="pageoneC">
      	<dl v-for="item in result" @click="goNext()" class="dd">
	     		<dd><img :src="item.img"></dd>
	     		<dt class="dt1">{{ item.title|slice }}<b>...</b></dt>
	     		<dt class="dt2">{{ item.price }}</dt>
     		</dl>
      </div>
</template>

<script>
export default {
	props:["id"],
	data(){
		return{result:{}}
	},
	methods:{
		goNext:function(){
			this.$router.push({path:"/components/pagetwo" })
		}
	},
	filters: {
	    slice(title) {
	      return title.slice(0,29);
	    }
  	},
	created(){
		this.axios.get("../static/data/first1.json").then(data =>{
			this.result= data.data.list;
		})
	},
	watch: {
    	id(newId,oldId){
      	var url = '../static/data/first' + this.id +".json";
     	this.axios.get(url).then(data=> {
				this.result= data.data.list
      })
    }
 },
 	mounted(){
	 	
  }
}
</script>

<style lang="css">
</style>
